<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/list.css">
</head>
<body>
    <div class="top">
    <div class="topBanner">
        <ul class="topleft">
            <li>
                <p>中国大陆∨</p>
            </li>
            <li >
                <a href="./login.html"><p class="off active">请登录</p></a>
                <div class="on" >
                <span>0</span>
                <button class="logout">退出登录</button>
                </div>
            </li>
            <li>
                <p>手机逛淘宝</p>
            </li>
        </ul>
        <ul class="topright">
            <li>
                <a href="./index.html"><p>首页</p></a> 
            </li>
            <li>
                <a href="./cart.html" target="_blank">
                    <p class="cart">购物车∨</p></a>
            </li>
            <li>
                <p>收藏夹∨</p>
            </li>
            <li>
                <p>商品分类</p>
            </li>
            <li>
                <p>免费开店</p>
            </li>
            <li>
                <P>千牛卖家中心∨</P>
            </li>
            <li>
                <p>联系客户∨</p>
            </li>
            <li class="lastli">
                <p>网站导航∨</p>
                <div class="liNav">
                </div>
            </li>
        </ul>
    </div>
</div>
    <div class="search">
        <div class="logo"><img src="./image/tblogo.png" alt=""></div>
        <div class="search1">
            <div>宝贝∨</div>
            <input type="text" placeholder="请输入要搜索的词">
            <button>搜索</button>
            <ul class="searchUl">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="divSan">
        <div>所有宝贝</div>
        <div>天猫</div>
        <div>二手</div>
    </div>
    <div class="list1">
        <div class="allList">
            <div>所有分类＞</div>
            <button>收起筛选∨</button>
        </div>
    </div>
    <div class="bigList">
        <!-- 1 -->
        <div>
            <p>&nbsp;&nbsp; 品牌:</p>
            <ul>
                <li>林氏木业</li>
                <li>全友</li>
                <li>顾家家具</li>
                <li>源氏木语</li>
                <li>芝华士</li>
                <li>索菲亚</li>
                <li>卫斯理</li>
                <li>麦田</li>
                <li>双虎</li>
                <li>耐家</li>
                 <li>蔻丝</li>
                <li>原始原素</li>
                <li>慕思</li>
                <li>丽莎</li>
                <li>美克·美家</li>
                <li>格斯帝</li>
                <li>凯佳蒂</li>
                <li>蔓斯菲尔</li>
            </ul>
            <div class="listRight">
                <button>多选</button>
                <div>更多∨</div>
            </div>
        </div>
        <!-- 2 -->
        <div>
            <p>&nbsp;&nbsp; 配送地址:</p>
            <ul>
                <li>上海</li>
                <li>北京</li>
                <li>天津</li>
                <li>青岛市</li>
                <li>重庆</li>
                <li>成都市</li>
                <li>佛山市</li>
                <li>广州市</li>
                <li>杭州市</li>
                <li>深圳市</li>
                <li>南京市</li>
                 <li>长沙市</li>
                <li>常州市</li>
                <li>南昌市</li>
                <li>苏州市</li>
                <li>东莞市...</li>
            </ul>
            <div class="listRight">
                <button>多选</button>
                <div>更多∨</div>
            </div>
        </div>
        <!-- 3 -->
        <div>
            <p>&nbsp;&nbsp; 风格:</p>
            <ul>
                <li>简约</li>
                <li>现代</li>
                <li>北欧风格</li>
                <li>欧式</li>
                <li>现代</li>
                <li>中式</li>
                <li>美式</li>
                <li>乡村</li>
                <li>轻奢</li>
                <li>新中式</li>
                 <li>明清</li>
                <li>古典</li>
                <li>意式</li>
                <li>新古典</li>
                <li>日式</li>
                <li>田园</li>
                <li>地中海</li>
                <li>复古</li>
                <li>怀旧</li>
                <li>韩式</li>
            </ul>
            <div class="listRight">
                <button>多选</button>
                <div>更多∨</div>
            </div>
        </div>
    </div>
    <div class="divTui">
        <p>您是不是想找：</p>
        <ul>
            <li>沙发床</li>
            <li>梳妆台</li>
            <li>家居</li>
            <li>茶几</li>
            <li>衣柜</li>
            <li>桌子</li>
            <li>柜子</li>
            <li>电视柜</li>
        </ul>
    </div>
    <!-- 数据 -->
    <div class="box container">
        <div class="category">
            <ul class="clearfix">
              <div class="title">分类信息</div>
              <!-- JS 渲染 -->
            </ul>
          </div>
        <div class="filter">
          <div class="title">
            筛选条件
          </div>
          <ul>
            <li class="filterItem" data-type="hot">热销</li>
            <li class="filterItem" data-type="sale">折扣</li>
          </ul>
        </div>
        <div class="search">
          <div class="title">搜索</div>
          <input type="text">
          <button class="searchBtn">搜索</button>
        </div>
        <div class="sortBox">
          <div class="title">
            排序
          </div>
          <ul>
            <li class="sortItem" data-type="id" data-method="ASC">综合
              <span class="active"></span>
              <span></span>
            </li>
            <li class="sortItem" data-type="sale" data-method="ASC">折扣
              <span></span>
              <span></span>
            </li>
            <li class="sortItem" data-type="price" data-method="ASC">价格
              <span></span>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="pagination">
          <span class="pageInfo"> 1 / 100 </span>
          <select>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
            <option value="24">24</option>
          </select>
          <div class="prev">&lt;</div>
          <div class="next">&gt;</div>
        </div>
      </div>
    
      <ul class="list container clearFix">
        <li>
          <div class="show">
            <img src="" alt="">
          </div>
          <div class="desc">
            <p class="info">商述商品</p>
            <p class="price">
              <span class="current">￥ 99.00</span>
              <span class="old">￥ 999.00</span>
            </p>
            <button>加入购物车</button>
          </div>
          <span class="tip active">HOT</span>
          <span class="tip active">SALE</span>
        </li>
      </ul>

    <div class="divBottom">
        <button class="bu1 prev">上一页</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>...</li>
        </ul>
        <button class="bu1 next"> 下一页</button>
        <div>到第 <input type="text"> 页</div>
        <button class="bu2">确定</button>
    </div>
    <!-- 侧边 -->
    <div class="divAdv"><img src="./image/list0.png" alt=""></div>
    <!-- 底部搜索 -->
    <div class="search2">
        <div>宝贝∨</div>
        <input type="text" placeholder="请输入要搜索的词">
        <button>搜索</button>
        <ul class="searchUll">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <footer><div><img src="./image/foot.png" alt=""></div></footer>

    <script src="./js/utils/utils AJAX.js"></script>
    <script src="./js/utils/swiper/swiper-bundle.min.js"></script>
    <script src="./js/list.js"></script>
</body>
</html>